<template>
  <div class="flex items-center gap-1">
    <template v-if="auth">
      <svg-icon icon-class="shouquan" :class="status ? 'text-green-600' : 'text-gray-300'" style="font-size: 16px;" />
      <span :class="status ? 'text-green-600' : 'text-red-600'">{{ status ? trueLabel || '已授权' : falseLabel || '未授权'
      }}</span>
      <!-- <el-button v-if="!status" link type="primary" @click="emit('auth')">去授权</el-button> -->
    </template>
    <template v-else>
      <svg-icon :icon-class="item.icon" :class="item.class" style="font-size: 16px;" />
      <span>{{ item.label }}</span>
    </template>
  </div>
</template>

<script setup>
import { computed, reactive } from 'vue';

const props = defineProps({
  status: [Boolean, Number, String],
  auth: Boolean,
  trueLabel: { type: String, default: '' },
  falseLabel: { type: String, default: '' },
})

const statuList = reactive({
  1: {
    icon: 'state_finish_line',
    class: 'text-green-600',
    label: props.trueLabel || '启用'
  },
  2: {
    icon: 'state_disabled',
    class: 'text-red-600',
    label: props.falseLabel || '禁用'
  },
  3: {
    icon: 'state_finish_line',
    class: 'text-blue-600',
    label: '申请中'
  },
})

const item = computed(() => {
  const { status } = props
  if (typeof status === 'boolean') {
    return status ? statuList[1] : statuList[2]
  }
  if (typeof status === 'string') {
    return status === '启用' ? statuList[1] : status === '禁用' ? statuList[2] : statuList[3]
  }
  return statuList[status] || statuList[3]
})

const emit = defineEmits(['auth'])
</script>